---
image: /generated/articles-docs-transitions-presentations-slide.png
crumb: "@remotion/transitions - Presentations"
title: "slide()"
---

A presentation where the entering slide pushes out the exiting slide.

<Demo type="slide" />

## Example

```tsx twoslash title="SlideTransition.tsx"
import { AbsoluteFill } from "remotion";

const Letter: React.FC<{
  children: React.ReactNode;
  color: string;
}> = ({ children, color }) => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: color,
        opacity: 0.9,
        justifyContent: "center",
        alignItems: "center",
        fontSize: 200,
        color: "white",
      }}
    >
      {children}
    </AbsoluteFill>
  );
};
// ---cut---
import { linearTiming, TransitionSeries } from "@remotion/transitions";
import { slide } from "@remotion/transitions/slide";

const BasicTransition = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={40}>
        <Letter color="#0b84f3">A</Letter>
      </TransitionSeries.Sequence>
      <TransitionSeries.Transition
        presentation={slide()}
        timing={linearTiming({ durationInFrames: 30 })}
      />
      <TransitionSeries.Sequence durationInFrames={60}>
        <Letter color="pink">B</Letter>
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};
```

## API

Takes an object with the following properties:

### `direction`

One of `from-left`, `from-right`, `from-top`, `from-bottom`.

```tsx twoslash title="TypeScript type"
import { SlideDirection } from "@remotion/transitions/slide";

const slideDirection: SlideDirection = "from-left";
```

### `enterStyle?`<AvailableFrom v="4.0.84"/>

The style of the container when the scene is is entering.

### `exitStyle?`<AvailableFrom v="4.0.84"/>

The style of the container when the scene is exiting.

## See also

- [Source code for this presentation](https://github.com/remotion-dev/remotion/blob/main/packages/transitions/src/presentations/slide.tsx)
- [Presentations](/docs/transitions/presentations)
